Шаблонная страница

Главный заголовок материала (h1)

Главный заголовок материала читается поисковым роботом в первую очередь. Желательно, чтобы в заголовке присутствовали самые главные ключевые слова семантического ядра контента. Нежелательно озаглавливать материал заголовком второго уровня (h2), т. к. не исключено, что робот поисковика сочтет материал второстепенным и в поисковой выдаче страница может потерпеть ущерб.

Заголовок параграфа (h2)

В сложном материале, содержащем не одно смысловое поле, темы лучше отбить заголовками второго уровня. У параграфов, что естесственно, общий заголовок - в тэге <h1></h1>, но в самом параграфе так же могут быть некоторые абзацы, отбитые заголовками третьего уровня (h3).

Заголовок абзаца (h3)

Абзацы, озаглавленные тэгами h3, могут быть как самостоятельными в тех случаях, когда материал менее важен, чем параграф под тэгом h2, но при этом не входить в группу. Но как правило, тэгом h3 озаглавливаются тематические абзацы, входящие в параграф. Заодно пример ненумерованного списка:

• Общий заголовок (h1)
  
  • Заголовок параграфа (h2)
    
    • Заголовок абзаца (h3)
    • Заголовок абзаца (h3)
  • Заголовок параграфа (h2)
    
    • Заголовок абзаца (h3)
    • Заголовок абзаца (h3)

Заголовок краткого текстового блока или виждета (h4)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Заголовок параграф в виджете или выделенный текст (h5)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Заголовок абзаца в виджете или выделенный текст (h6)

Заголовки меньших классов (от h4 до h6) стоит применять в крупных материалах как особо выделенный текст с небольшим количеством слов (алерты, сообщения, уточнения). Но как заголовки применять их следует лишь в виджетах и кратких тексовых модулях.

Ссылка классом «читайдалее» <a class="readmore" .....>

Подробная информация

Ссылка классом «читайдалее» <a class="dreadmore" .....>

Подробная информация

Ссылка классом «читайдалее» <a class="arrowmore" .....>

Подробная информация

Буковица: use <p class="dropcap">.

Если на странице недостаточно иллюстраций или их нет совсем, то оживить текст можно «буковицами» или как их еще называют «фонариками».

Разделительная линия: Сверху сплошная <hr />, снизу пунктирная, если добавить в тэг <hr class="dotted" />

Div and Span Styles

Blockquote and Q Styles

Default <blockquote>
Or <q> tag with class="blockquote"

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<blockquote> tag with class="quotation" and an an additional <p> tag.
(use <blockquote><p>....</p></blockquote>)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Combine Styles

pre {
	margin: 10px 0 10px 0px;
	padding: 5px 0 5px 10px;
	border: 1px dotted #aab4be;
	border-left: 20px solid #b4b4b4;
	background: #fafafa;
	font-size: 90%;
	color: #2E8B57;
	font-family: "Courier New", Courier, monospace;
	
	/* Browser specific (not valid) styles */
	/* to make preformatted text wrap */
	 
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla */
}